<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { XhrPOST } from '@/api';
const router = useRouter();
const modal = ref(true);
const onCancel = () => {
  router.replace({ name: 'edit' });
};
const onOk = () => {
  if (user.name == 'admin' && user.password == '666666') {
    modal.value = false;
  }
};
const user = reactive({
  name: '',
  password: '',
});
const files = reactive({
  json: false,
  img: {
    file: '',
    base64: '',
  },
});

// 阻止默认的自动上传，进行手动上传
const handleUploadJson = (file: any) => {
  files.json = file;
  return false;
};
const handleUploadImg = (file: Blob) => {
  files.img.file = file;
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (e) => {
    files.img.base64 = e.target?.result;
  };
  return false;
};
const onUpdata = async () => {
  if (!files.img.file || !files.json) {
    return window.alert('请选择文件后上传');
  }
  let myData = new FormData();
  myData.append('file', files.img.file);
  myData.append('file', files.json);
  let data = (await XhrPOST('/addTemp', myData))?.data;
  if (data.code == 200) {
    window.alert('成功' + JSON.stringify(data.data));
  } else {
    window.alert(`出错`);
  }
};
</script>
<template>
  <Modal
    title="身份验证"
    v-model="modal"
    :closable="false"
    ok-text="验证"
    footer-hide
    :mask-closable="false"
  >
    <Input prefix="ios-contact" v-model="user.name" placeholder="账号" />
    <Input prefix="ios-finger-print" v-model="user.password" placeholder="密码" />
    <div>
      <Button @click="onOk" type="primary">确定</Button>
      <Button @click="onCancel">取消</Button>
    </div>
  </Modal>
  <div v-show="!modal" class="mt-[10vh]">
    <Row>
      <Col span="12">
        <Upload
          multiple
          name="文件字段名"
          :before-upload="handleUploadJson"
          type="drag"
          action="//jsonplaceholder.typicode.com/posts/"
          accept=".json"
        >
          <div style="padding: 20px 0">
            <Icon
              :type="files.json ? 'md-checkbox' : 'ios-cloud-upload'"
              size="100"
              :style="{ color: files.json ? '#19be6b' : '#3399ff' }"
              class="h-[200px]"
            ></Icon>
            <p>
              {{ files.json ? files.json.name : '点击或拖动文件到这里上传JSON文件' }}
            </p>
          </div>
        </Upload>
      </Col>
      <Col span="12">
        <Upload
          multiple
          name="文件字段名"
          :before-upload="handleUploadImg"
          type="drag"
          action="//jsonplaceholder.typicode.com/posts/"
          accept=".png,.jpg,.jpeg,.webp,.pjpeg,.svg,.jfif"
        >
          <div style="padding: 20px 0">
            <Icon
              v-if="!files.img.file"
              type="ios-cloud-upload"
              size="100"
              style="color: #3399ff"
              class="h-[200px]"
            ></Icon>
            <img lazy v-if="files.img.base64" :src="files.img.base64" class="h-[193px]" />
            <p>{{ files.img.file ? files.img.file.name : '点击或拖动文件到这里上传封面图' }}</p>
          </div>
        </Upload>
      </Col>
    </Row>
    <Button @click="onUpdata" type="primary" size="large" class="w-[50vw] ml-[25%] mt-5">
      上传
    </Button>
  </div>
</template>
<style scoped></style>
